<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户设置</title>
    {% include "component/static_resource_css.html" %}
    <style>
        .mybtn {
            background-color: #ff6a46;
            border-color: #ff6a46;
        }

        .mybtn:hover {
            color: #4b4949 !important;
            background-color: #FF6A467C;
            border-color: #FF6A467C;
        }

        .mytext {
            color: #ff6a46 !important;
            margin-top: 0 !important;
        }
    </style>
</head>
<body>

<div class="nk-container">
    {% include "component/header.html" %}
    <!-- 内容 -->
    <div class="main">
        <div class="container p-5 mt-3 mb-3">
            <!-- 修改密码 -->
            <h6 class="text-left text-info border-bottom pb-2 mt- mytext" style="margin-top: 0!important;">
                修改密码: {{ username }}</h6>
            <form class="mt-5" method="post" action="/user/reset_password">
                <div class="form-group row mt-4">
                    <label for="old-password" class="col-sm-2 col-form-label text-right">原密码:</label>
                    <div class="col-sm-10">
                        <input type="password"
                               class="form-control {{' ' if oldPasswordError == "" else ' is-invalid' }}"
                               id="old-password" name="oldPassword" placeholder="请输入原始密码!" required value="{{ oldPassword }}">
                        <div class="invalid-feedback">{{ oldPasswordError }}</div>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <label for="new-password" class="col-sm-2 col-form-label text-right">新密码:</label>
                    <div class="col-sm-10">
                        <input type="password"
                               class="form-control{{ " " if newPasswordError == "" else ' is-invalid' }}"
                               id="new-password" name="newPassword" placeholder="请输入新的密码!" required value="{{ newPassword }}">
                        <div class="invalid-feedback">{{ newPasswordError }}</div>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <label for="confirm-password" class="col-sm-2 col-form-label text-right">确认密码:</label>
                    <div class="col-sm-10">
                        <input type="password"
                               class="form-control{{ ' ' if cpwdError == "" else ' is-invalid' }}"
                               id="confirm-password" placeholder="再次输入新密码!" name="confirm-password" required>
                        <div class="invalid-feedback">{{ cpwdError }}</div>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-10 text-center">
                        <button type="submit" class="btn btn-info text-white form-control mybtn">立即保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="container" style="padding-bottom: 180px"></div>
    {% include "component/footer.html" %}
</div>

{% include "component/static_resource_js.html" %}
<script>
    $(document).ready(function () {
        console.log("Hello world!")
        console.log("JS由此开始！")
    })
</script>

</body>
</html>